<template>
  <div class="mr20">
    <div class="table-operator">
      <el-button type="primary" icon="el-icon-plus" @click="handleShiftAdd">{{$t('sys.new')}}</el-button>
    </div>

    <el-table
      class="mt20"
      ref="table"
      :data="tableData"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="name" :label="$t('sys.full_name')"/>
      <el-table-column :label="$t('sys.time_slot')">
        <template slot-scope="scope">
          {{ scope.row.startTime }} - {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('sys.scheduled_down_time')">
        <template slot-scope="scope">
          <div
            v-for="item in scope.row.planTimes"
            :key="item.id"
          >{{ item.startTime }} - {{ item.endTime }} {{ item.name }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="actions" :label="$t('sys.operation')" width="150">
        <template slot-scope="scope">
          <span class="table-actionItem"><el-button
            type="text"
            @click="handleShiftEdit(scope.row)">{{$t('sys.edit')}}</el-button></span>
          <span class="table-actionItem">
            <el-popconfirm
              :title="$t('sys.confirm_to_delete_shift_configured_for_staff_be_deleted_synchronously')"
              placement="top"
              @confirm="handleShiftDelOk(scope.row)"
            >
              <el-button class="link-danger" type="text" slot="reference">{{$t('sys.delete')}}</el-button>
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <shift-form ref="shiftForm" :shifts="shifts" @ok="handleShiftAddOk" />
    <!-- <plan-type-form ref="planTypeForm" /> -->
  </div>
</template>

<script>

import ShiftForm from './ShiftForm'
import { getHmshiftsList,deleteHmshifts } from '@/apis/paas/HmShiftsController.js'

export default {
  name: 'ShiftSetting',
  components: {
    ShiftForm
    // PlanTypeForm
  },
  data () {
    return {
      shifts: [],
      tableData: []
    }
  },
  computed: {
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      const { id } = this.$store.getters.getUserVal
      this.tableData = [{}]
      getHmshiftsList({ userId: id }).then(res => {
        const shifts = res || []
        this.tableData = shifts
        return { data: shifts }
      })
    },

    handleShiftAdd () {
      this.$refs.shiftForm.add()
    },
    handleShiftEdit (record) {
      this.$refs.shiftForm.edit(record)
    },
    handleShiftAddOk () {
      this.loadData()
    },
    handleShiftDel (record) {
      this.$confirm({
        title: this.$t('sys.delete_shift'),
        content: this.$t('sys.confirm_to_delete_shift_configured_for_staff_be_deleted_synchronously'),
        onOk: () => {
          return deleteHmshifts({ id: record.id }).then(res => {
            this.$message.success(this.$t('sys.operation_success'))
            this.loadData()
          })
        }
      })
    },
    handleShiftDelOk (record) {
      deleteHmshifts({ id: record.id }).then(res => {
        this.$message.success(this.$t('sys.operation_success'))
        this.loadData()
      })
    },
    handePlanTypeEdit () {
      this.$refs.planTypeForm.edit()
    }
  }
}
</script>

<style></style>
